<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../../assets/css/base.css">
    <style>
        :root{
            --w: 320px;
        }
        .user-list{
            --m:20px;
            width:calc( var(--w) * 3 + var(--m) * 2);
            display: flex;
            /* flex-wrap: wrap; */
            flex-flow: column nowrap;
            margin:0 auto;
        }
        .user-card {
            width: var(--w);
            height: 130px;
            margin-bottom:var(--m);
            display: flex;
            flex-flow: row nowrap;
            box-shadow: 0px 0px 10px #999;
            border-radius: 6px;
        }
        /* .user-card:nth-child(3n){
            margin-right: 0px;
        } */
        .user-card:nth-child(n+4){
            margin-top:var(--m) ;
        }
        .user-card .head {
            width: 120px;
            height: 130px;
            /* 禁止弹性盒子内中当前元素的缩放操作 */
            flex-shrink: 0;
        }

        .user-card .head img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 6px 0px 0px 6px;
            border-right: 1px solid #efefef;
            overflow: hidden;
        }

        .user-card .info {
            cursor: pointer;
            /* 提供动态宽度 */
            flex-grow: 1;
            /* 提供width属性，为单行隐藏完成必要条件定义 */
            width: 0px;
            /* width: 150px; */
            margin-left: 10px;
            margin-top: 10px;

            /* 字体的倍数 */
            line-height: 1.7;
        }

        .user-card .info .row {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            padding: 0px 10px;
        }

        .user-card .info .row span:first-child {
            display: inline-block;
            color: #999;
            width: 60px;

            /* 文字两端对齐 */
            text-align-last: justify;
        }
        .user-card .info .row span:last-child::before{
            content: ":";
            padding: 0px 8px 0px 4px;
        }

        .user-card .info .row:hover {
            position: relative;
            background-color: #000;
            color: white;
            border-radius: 8px;
            min-width: 80%;
            /* 按照内容填充 */
            width: fit-content;
            z-index: 99;
        }
    </style>
</head>
<body>
    <div id="app">
        <h4>用户信息列表</h4>
        <div class="user-list">
            <user-card v-for="u in users" :key="u.no" v-bind:user=" u "></user-card>
        </div>
    </div>
    <script type="module">
        import axios from "../../assets/axios/axios.js"
        import { createApp } from "../../assets/vue3/vue.esm-browser.js";
        import UserCard from "./components/UserCard.js"
        createApp({
            data() {
                return {
                    users:[]
                }
            },
            methods: {
                async loadUserList() {
                    try {
                        let { data } = await axios.get("http://127.0.0.1:3000/api/users")
                        this.users = data;
                    } catch (error) {
                        console.log(error)
                        alert("请求失败")
                    }
                }
            },
            created () {
                this.loadUserList();
            },
        })
        .use(UserCard)
        .mount("#app")
    </script>
</body>
</html>